<template>
	<el-container class="mainContainer">
		<el-aside width="200px">
			<el-menu default-active="/shop/back" background-color="#000000" text-color="#fff"
				active-text-color="#fdfdfd" router>

				<el-menu-item index="/shop/back">
					<i class="el-icon-document"></i>
					<span slot="title">背景</span>
				</el-menu-item>

				<el-menu-item index="/shop/head">
					<i class="el-icon-document"></i>
					<span slot="title">头部</span>
				</el-menu-item>

				<el-menu-item index="/shop/goldring">
					<i class="el-icon-document"></i>
					<span slot="title">紧箍</span>
				</el-menu-item>

				<el-menu-item index="/shop/ear">
					<i class="el-icon-document"></i>
					<span slot="title">耳朵</span>
				</el-menu-item>

				<el-menu-item index="/shop/eyes">
					<i class="el-icon-document"></i>
					<span slot="title">眼睛</span>
				</el-menu-item>

				<el-menu-item index="/shop/nose">
					<i class="el-icon-document"></i>
					<span slot="title">鼻子</span>
				</el-menu-item>

				<el-menu-item index="/shop/mouth">
					<i class="el-icon-document"></i>
					<span slot="title">嘴巴</span>
				</el-menu-item>

				<el-menu-item index="/shop/beard">
					<i class="el-icon-document"></i>
					<span slot="title">胡子</span>
				</el-menu-item>

			</el-menu>
		</el-aside>
		<el-main>
			<router-view></router-view>
		</el-main>

	</el-container>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.mainContainer {
		height: 100vh;
	}

	.el-aside {
		background-color: #000000;
		color: #d3dce6;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #000000;
		color: #d3dce6;
		text-align: center;
	}
</style>
